<template>
  <a-card :bordered="false" style="margin-bottom: 10px">
    <BaseInfo :id="personId"></BaseInfo>
    <a-table ref="table" rowKey="id" :columns="columns" :paganization="false"
      :dataSource="pageData" style="margin-top:20px;">
      <!--操作-->
      <template slot="action" slot-scope="text, record">
        <!-- cancel: 1已取消 2未取消 -->
        <!-- consultStatus: 1待预约  2待咨询 3已咨询 -->
        <template v-if="record.cancel == 1 || record.consultStatus == 3">
          <!-- <a-button @click="onAppointment(record, true)" type="link" style="padding: 0">再次预约</a-button> -->
          <!-- <a-divider type="vertical" /> -->
          <a-button @click="onDetail(record)" type="link" style="padding: 0; color: #1890ff">查看</a-button>
        </template>
        <template v-else>
          <!-- 待预约 -->
          <template v-if="record.consultStatus == 1">
            <a-button @click="onAppointment(record)" type="link" style="padding: 0">预约</a-button>
            <a-divider type="vertical" />
            <a-button @click="onCancelConsult(record)" type="link" style="padding: 0; color: #333">取消</a-button>
          </template>
          <!-- 待咨询 -->
          <template v-if="record.consultStatus == 2">
            <a-button @click="onEnter(record)" type="link" style="padding: 0">谈话录入</a-button>
            <a-divider type="vertical" />
            <a-button @click="onAppointment(record)" type="link" style="padding: 0;">改约</a-button>
            <a-divider type="vertical" />
            <a-button @click="onDetail(record)" type="link" style="padding: 0; color: #1890ff">查看</a-button>
            <a-divider type="vertical" />
            <a-button @click="onCancelConsult(record)" type="link" style="padding: 0; color: #333">取消</a-button>
          </template>
          
        </template>
        
      </template>
      <template slot="status" slot-scope="text, record">
        <template v-if="record.cancel == 1">
          <span style="color: #ddd;">已取消</span>
        </template>
        <template v-else>
          <span v-if="record.consultStatus == 1" style="color: #1890ff;">待预约</span>
          <span v-if="record.consultStatus == 2" style="color: #1890ff;">待咨询</span>
          <span v-if="record.consultStatus == 3">已完成</span>
        </template>
      </template>
    </a-table>
    <!-- <DetailModal ref="detailModalId"/> -->
    <!-- <AddModal ref="addModalId" /> -->
    <DetailDrawer ref="DetailDrawer"></DetailDrawer>
    
  </a-card>
</template>

<script>
  import { consultHistory, consultCancel } from '@/api/sjsk/psycholog/consult/index.js'
  import BaseInfo from '@/views/sjsk/modules/BaseInfo'
  import DetailDrawer from './components/DetailDrawer.vue'
export default {
  components: {
    BaseInfo,
      DetailDrawer
  },
  data() {
    return {
      personId: '',
      id: '',
      form: {
        realname: "吴小林"
      },
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '访谈次数',
          dataIndex: 'consultNum',
          align: 'center',
          customRender: (text) => {
            return text ? `第${text}次` : '-'
          },
        },
        {
          title: '谈话方式',
          dataIndex: 'conversationStyle',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text == 1 ? '线上咨询' : '线下咨询'} length={20} />
          },
        },
        {
          title: '预约时间',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text.appointStartTime || '' + ' - ' + text.appointEndTime || '' } length={14} />
          },
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'consultStatus',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '谈话时间',
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text.consultStartTime || '' + ' - ' + (text.consultEndTime || '') } length={14} />
          },
        },
        {
          title: '操作',
          width: 300,
          align: 'left',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: [],
    }
  },
  created() {
    this.personId = this.$route.query.personId
    this.id = this.$route.query.id
  },
  async mounted() {
    // this.onQuery()
    this.getHistory()
  },

  methods: {
    getHistory() {
      const params = {}
      if(this.$route.query.type == 1 || this.$route.query.type == 2) {
        params.personId = this.$route.query.personId
      } else {
        params.socialId = this.$route.query.personId
      }
      consultHistory(params).then(res => {
        this.pageData = res.result
      })
    },
    onCancelConsult(item) {
      const { id, consultantName } = item
      this.$confirm({
        title: '确认提示',
        content: `是否确定取消${consultantName}的心理咨询预约`,
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          consultCancel({id}).then(res => {
            const { success, message }  = res
            if(success) {
              this.$message.success('取消成功！')
              this.onQuery()
            } else {
              this.$message.error(message)
            }
          })
        }
      })
      
    },
    onDetail(record) {
      
      this.$refs.DetailDrawer.show(record)
    },
    onEnter(query) {
      this.$router.push({
        path: "/psycholog/consult/consult-enter",
        query: {
          id: query.id,
          type: query.consultantType
        }
      })
    },
    onAppointment(item, isAgain = false) {
      this.$router.push({
        path: "/psycholog/consult/appointment",
        query: {
          id: item.id,
          type: item.consultantType == 1 || item.consultantType == 2 ? 1 : 2,
          isAgain
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.s1 {
  font-size: 20px;
  font-weight: bold;
}

.s2 {
  color: #04B615;
}

.s3 {
  margin-left: 30px;
}
</style>
